iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
0
自我挑戰組

30天的css animation修練系列 第 12

實作 css animation - 收合區塊動畫

  • 分享至 

  • xImage
  •  

今天來寫滿常見的收合區塊
一樣先把架構放好

/*引入material icon*/
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"  rel="stylesheet">
<div class="centered-wrapper">
  <div class="according-div">
    <input type="radio" id="list-1">
    <label for="question">question-1</label>
    <section>
      <p>放假字進來</p>
    </section>
  </div>
  <div class="according-div">
    <input type="radio" id="list-2">
    <label for="question">question-2</label>
    <section>
      <p>放假字進來</p>
    </section>
  </div>
  <div class="according-div">
    <input type="radio" id="list-3">
    <label for="question">question-3</label>
    <section>
      <p>放假字進來</p>
    </section>
  </div>
</div>

然後設定基本的樣式

body {
  margin: 0;
  padding: 0;
  /*線性漸層+轉角度的寫法*/
  background: linear-gradient(260deg, #ffcb85 20%, #fdf5c9 100%);
  height: 100vh;
}

.centered-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
}

.according-div {
  background: #fff;
  text-indent: 20px;
}

.according-div label {
  padding: 20px 0px;
  display: block;
}

.according-div input {
  position: absolute;
  right: 15px;
  margin:20px 0px 0px 0px;
  /*   display:none;    */
}

.according-div section p {
  padding: 20px 20px;
}

.according-div section {
  box-shadow: inset 0px 0px 5px #666666;
  height:0;
  overflow:hidden;
}

當選擇到 input 時,改變僞元素的內容
並在選擇到時,增加一個將高度打開的漸變效果

.according-div input:checked ~ label::before{
  content: '\e5ce';
}

.according-div label::before{
  font-family: "Material Icons";
  content: '\e5cf';
  display:block;
  position: absolute;
  margin-top:8px;
  right: 8px;
  color:#666666;
  font-size:1.8rem;
}

.according-div input:checked ~ section{
  height:auto;
  padding:20px;
}

本次轉移陣地到 jsfiddle
今天的 codepen有點怪怪的QQ
https://jsfiddle.net/kingofturnip/fy5Ld321/50/


上一篇
實作 css animation - pre load 動畫 part2
下一篇
實作 css animation - 水波動態裝飾文字
系列文
30天的css animation修練30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言